
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动轨迹绘制</title>
  <!-- <script src="./static/Cesium.js"></script>
  <link rel="stylesheet" href="./static/Widgets/widgets.css"> -->
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>
  <style>
    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .eventName {
      position: fixed;
      top: 100px;
      left: 200px;
      z-index: 9999;
    }
  </style>
</head>

<body>
<div id="cesiumContainer"></div>
<div class="eventName">
  <button onclick="event2()">启航</button>
</div>
<script>
var viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infobox: false,
  sceneModePicker: false,
  selectionIndicator: false,
  timeline: false,
  scene3DOnly: true,
  navigationHelpButton: false,
  creditContainer: "cesiumContainer",
  fullscreenButton: false,
  vrButton: false,
  skyAtmosphere: false,
  shouldAnimate: true,
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  }),
  maximumScreenSpaceError: 16, //默认值16 用于提高细节细化级别的最大屏幕空间错误
});

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(117.224, 31.819, 300.0),
  orientation: {
    // 指向
    heading: 0.0,
    // 视角
    pitch: Cesium.Math.toRadians(-90),
    roll: 0.0
  }
})
class DrawTransformCurve {
  constructor(arg) {
    //设置唯一id 备用
    this.viewer = arg.viewer;
    this.Cesium = arg.Cesium;
    this._poly = {};
    this._positionsd = {};
    this._polyLine = {};
    this._entitys = {};
  }
  // 添加模型
  addEntity(params) {
    var entiti = this.viewer.entities.add({
      id: params.id,
      position: this.Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.het),
      orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.het),
        new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(params.rotates && params.rotates.heading || 0), Cesium.Math.toRadians(params.rotates && params.rotates.pitch || 0), Cesium.Math.toRadians(params.rotates && params.rotates.roll || 0))),
      model: {
        uri: params.url || "./Apps/SampleData/models/CesiumAir/Cesium_Air.glb",
        minimumPixelSize: params.minSize || 128,//最小的模型像素
        maximumScale: params.MaxSize || 10000,//最大的模型像素
      }
    })
    this._entitys[params.id] = entiti;
  }

  // 绘制移动线
  addtransPolyLine(params) {
    var _this = this
    var Cesium = this.Cesium;
    var viewer = this.viewer
    var PolyLinePrimitive = (function () {
      function _(positions) {
        this.options = {
          polyline: {
            show: true,
            positions: [],
            material: params.color ? Cesium.Color.fromCssColorString(params.color) : Cesium.Color.RED,
            width: params.width || 5
          }
        };
        this.positions = positions;
        this._init();
      }

      _.prototype._init = function () {
        var _self = this;
        var _update = function () {
          return _self.positions;
        };
        //实时更新polyline.positions
        this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
        var pLine = viewer.entities.add(this.options);
        _this._polyLine[params.id] = pLine;
      };
      return _;
    })();
    var fromDegposition = Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.alt)

    if (_this._positionsd[params.id] || _this._positionsd[params.id] instanceof Array) {
      if (_this._positionsd[params.id].length >= 2) {
        if (!Cesium.defined(_this._poly[params.id])) {
          _this._poly[params.id] = new PolyLinePrimitive(_this._positionsd[params.id]);
        } else {
          _this._positionsd[params.id].push(fromDegposition);
        }

      } else {
        _this._positionsd[params.id].push(fromDegposition);
      }
    } else {
      _this._positionsd[params.id] = [];
      _this._positionsd[params.id].push(fromDegposition);
    }


  }


  // 开始绘制移动模型轨迹
  startTransfromEnt(params) {
    var _this = this
    var Cesium = this.Cesium;
    var viewer = this.viewer
    if (this._entitys[params.id]) {
      var fromDegposition = Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.alt)
      this._entitys[params.id]._position._value = fromDegposition;
      if (params.ifDrawLine)
        this.addtransPolyLine(params)
      if (params.rotates) this.rotateEnt(params)
    } else {
      this.addEntity(params)
      if (params.ifDrawLine)
        this.addtransPolyLine(params)
    }
  }
  // 旋转模型
  rotateEnt(params) {
    var _this = this
    var Cesium = this.Cesium;
    var viewer = this.viewer
    if (this._entitys[params.id]) {
      var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(params.rotates && params.rotates.heading || 0), Cesium.Math.toRadians(params.rotates && params.rotates.pitch || 0), Cesium.Math.toRadians(params.rotates && params.rotates.roll || 0));
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(this._entitys[params.id]._position._value, hpr);
      this._entitys[params.id]._orientation._value = orientation
    }
  }
  ///删/
  // 清空
  clear() {
    for (const key in this._entitys) {
      if (this._entitys.hasOwnProperty.call(this._entitys, key)) {
        const element = this._entitys[key];
        this.viewer.entities.remove(element)
        this.viewer.entities.remove(this._polyLine[key])
        this._poly[key] = undefined;
        this._positionsd[key] = undefined;
        this._polyLine[key] = undefined;
        this._entitys[key] = undefined;
      }
    }
  }
  // 销毁
  destroy() {

  }

}

var clickPont = new DrawTransformCurve({
  viewer,
  Cesium
})

var timer = null
var timer2 = null

function event2() {
  var position = {
    lon: 117.224, lat: 31.819, alt: 0,
  }
  var rotates = {
    heading: 0,
    pitch: 0,
    roll: 0
  }

  clearInterval(timer2)
  timer2 = setInterval(() => {
    clickPont.startTransfromEnt({
      id: 'a3-60',
      position,
      ifDrawLine: true,
    })
    position.lon += Math.random() * 0.0001;
    position.lat += Math.random() * 0.0001;
    position.alt += Math.random() * 1;
    rotates.heading += Math.random() * 10;
    rotates.pitch += Math.random() * 10;
    rotates.roll += Math.random() * 10;
  }, 100)

}

</script>
</body>

</html>
